1 00:00:00,630 --> 00:00:01,850 Hello and welcome. 2 00:00:01,860 --> 00:00:09,120 In this video we are going to add some success to our project. 3 00:00:09,180 --> 00:00:14,900 So I've already made a reference to this year says Inside Out here Mel. 4 00:00:14,900 --> 00:00:17,180 Here is the link here. 5 00:00:17,220 --> 00:00:23,700 So now I'm going to create the actual Seer says farside click on file option. 6 00:00:23,700 --> 00:00:26,080 Good to see you. 7 00:00:26,230 --> 00:00:34,910 And I'm just going to say this to save as I say inside the same directory as heftier mail. 8 00:00:34,910 --> 00:00:38,710 Far I'm just going to call this b. 9 00:00:38,790 --> 00:00:43,540 I like case. 10 00:00:44,070 --> 00:00:50,530 I dont see SS and just can click on and drop down. 11 00:00:50,990 --> 00:00:57,120 So let's see is this option safe so far now is a success file. 12 00:00:57,390 --> 00:00:59,490 You can see the bottom right hand corner. 13 00:00:59,490 --> 00:01:06,770 It's called the csx AGAIN I am going to add this this is called an explain it line by line. 14 00:01:07,230 --> 00:01:08,660 So this is a csx. 15 00:01:08,670 --> 00:01:13,770 Here's what I'm going to start with the first idea here. 16 00:01:13,770 --> 00:01:16,500 This is the idea called. 17 00:01:16,520 --> 00:01:20,830 So if we look in the hastier amount this is the idea I'm referring to. 18 00:01:21,450 --> 00:01:32,910 So here I have given it a whiff of 375 pixels a height of five to five pixels margin from the left. 19 00:01:32,910 --> 00:01:39,900 So basically this is the left some say from the left I want you to move this 350 pixels margin from 20 00:01:39,900 --> 00:01:43,710 the top to this is a tops same from the top. 21 00:01:43,770 --> 00:01:47,260 I want it to go down three. 22 00:01:47,570 --> 00:01:50,210 I'm going to go down six to five pixels. 23 00:01:50,400 --> 00:01:55,860 I'm giving it back one column of yellow and padding to the left. 24 00:01:55,870 --> 00:02:02,050 It's 30 pixels pad in refers to this space inside the deep element. 25 00:02:02,130 --> 00:02:09,580 So I'm seeing this space inside one it from the left to create some space 30 pixels. 26 00:02:09,600 --> 00:02:11,310 So that's what this. 27 00:02:11,550 --> 00:02:17,240 So these are these sets for the idea of container. 28 00:02:17,760 --> 00:02:24,410 And then we've got this idea called Sea which is here. 29 00:02:24,420 --> 00:02:30,790 This is one of the input field where you input the value in height. 30 00:02:31,020 --> 00:02:37,710 So I'm giving it a wave or two hundred and fifty pixels a height of 25 pixels. 31 00:02:37,770 --> 00:02:40,660 And again margin from the top. 32 00:02:40,770 --> 00:02:46,230 I've given it a value of 30 pixels. 33 00:02:46,230 --> 00:02:54,200 This is the input field here I go into my I've got input field or cagy. 34 00:02:54,450 --> 00:03:04,560 So again I'm applying this same stylin has I did with this C input again here this is a Web site which 35 00:03:04,560 --> 00:03:09,280 is this deep here I'm referring to this block of code here. 36 00:03:09,630 --> 00:03:15,680 So basically this is a sign in I'm giving it giving it in margin from the left. 37 00:03:15,690 --> 00:03:24,440 This is a left here to move 75 pixels margin from the top 50 pixels. 38 00:03:24,470 --> 00:03:30,740 Next I got the result idea is here on line 19. 39 00:03:30,960 --> 00:03:34,290 This is basically where the output will be rendered. 40 00:03:34,530 --> 00:03:43,400 The result of the BMI windspeed calculated and we have the submit button. 41 00:03:43,470 --> 00:03:50,590 This is the button that will be clicked on to do the calculation. 42 00:03:50,610 --> 00:03:58,090 So this is the value here is got on a t of Submit K value. 43 00:03:58,090 --> 00:04:04,840 That mean the text inside the bottom inside this input all see complete. 44 00:04:04,860 --> 00:04:08,340 So basically this is the essence of giving it. 45 00:04:08,340 --> 00:04:11,370 This is it with the right margin left. 46 00:04:11,370 --> 00:04:16,390 Top model really does basically gives a rounded edge. 47 00:04:16,390 --> 00:04:17,760 It makes it round. 48 00:04:17,770 --> 00:04:20,180 Give can like a bottom. 49 00:04:20,610 --> 00:04:27,180 Make in corners round and bother Saab's glynne means we don't want any value that the board does. 50 00:04:27,360 --> 00:04:35,820 So the xeno's shadows or anything like that it will remove the shadow background colour of giving background 51 00:04:35,820 --> 00:04:37,030 colour of blue. 52 00:04:37,050 --> 00:04:45,510 But feel free to apply your costume styling so that he looks to your taste. 53 00:04:45,570 --> 00:04:46,680 Call or hear. 54 00:04:46,680 --> 00:04:52,310 This refers to the colour of the text inside the submit input. 55 00:04:52,470 --> 00:04:55,700 It's going to be white font size. 56 00:04:55,740 --> 00:04:57,640 Bisley refers to the text size. 57 00:04:57,650 --> 00:04:59,890 I'm giving given 25 pixels. 58 00:05:00,570 --> 00:05:02,130 Body here basically. 59 00:05:02,160 --> 00:05:08,640 Well I'm saying I'm giving the entire body of the document I'm giving an empowering column of black 60 00:05:08,750 --> 00:05:13,230 This is black in hexadecimal values. 61 00:05:13,790 --> 00:05:22,720 Finally elemental from basically this is the title here which is this here that will be my later. 62 00:05:22,940 --> 00:05:28,200 I've given it padding because it's located inside deep. 63 00:05:28,370 --> 00:05:35,360 So keeping the padding padding refers to the space inside an element while margin refers to this base 64 00:05:35,540 --> 00:05:46,530 outside element so from inside to Dave telling it to move left 15 pixels to drop down from the top 25 65 00:05:47,010 --> 00:05:47,930 pixels. 66 00:05:48,150 --> 00:05:50,560 So that's basically it for disconcerts. 67 00:05:50,600 --> 00:05:55,330 I'm just going to save all that and open up the file again. 68 00:05:55,530 --> 00:05:56,950 So this is a project. 69 00:05:57,000 --> 00:06:03,480 I've got my CSA now and my hishe Titmouse I'm just going to run that's Rhonda hastier mail and see what 70 00:06:03,480 --> 00:06:04,240 it looks like. 71 00:06:04,260 --> 00:06:07,220 So this is what it looks like at the moment. 72 00:06:07,290 --> 00:06:10,020 So everything's in place. 73 00:06:10,020 --> 00:06:14,330 The only thing we need now is to create a function for the company button. 74 00:06:14,610 --> 00:06:22,940 So when we click on that it'll put the BMI here so that's it for this Late Show in the next live shot 75 00:06:23,010 --> 00:06:26,870 will be create in the javascript functionality. 76 00:06:27,060 --> 00:06:28,570 Thank you by phone.